<template>
    <div class="header">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <!-- 搜索框 -->
            <div class="left">
                <el-form-item>
                    <el-input v-model="formInline.keys" placeholder="请输入账号" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">搜索</el-button>
                </el-form-item>
            </div>
            <!-- 添加管理 -->
            <div class="right">
                <el-form-item>
                    <el-button type="primary" :disabled="multipleSelection.length <= 0" @click="onDelsItem">删除</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onAdd">新增管理员</el-button>
                </el-form-item>
            </div>
        </el-form>

        <!-- 表格 -->
        <el-table ref="multipleTableRef"
            :data="FiltertableData?.slice((currentPage - 1) * pageSize, currentPage * pageSize)" style="width: 100%"
            @selection-change="handleSelectionChange" max-height="420px" table-layout="fixed">
            <!-- 多选框 -->
            <el-table-column type="selection" />

            <!-- 数据渲染区域 -->
            <el-table-column label="用户名">
                <template #default="scope">{{ scope.row.name }}</template>
            </el-table-column>
            <el-table-column property="number" label="账号" show-overflow-tooltip />
            <el-table-column label="角色">
                <template #default="scope">
                    <span>{{ scope.row.role == 0 ? '超级管理员' : scope.row.role == 1 ? '管理员' : '普通员工' }}</span>
                </template>
            </el-table-column>
            <el-table-column property="phone" label="手机号码" />
            <el-table-column label="是否启用">
                <template #default="scope">
                    <el-switch v-model="scope.row.enable" @change="onswitch(scope.row)" />
                </template>
            </el-table-column>
            <el-table-column label="添加时间">
                <template #default="scope">
                    <span>{{ dayjs.unix(scope.row.time).format("YYYY/MM/DD") }}</span>
                </template>
            </el-table-column>

            <!-- 自定义操作栏 -->
            <el-table-column label="操作">
                <template #default="scope">
                    <!-- <Edit style="width: 1em; height: 1em; margin-right: 18px" @click="handleEdit(scope.$index, scope.row)"
                        color=" #337ecc" /> -->
                    <Delete style="width: 1em; height: 1em" @click="handleDelete(scope.$index, scope.row)"
                        color=" #337ecc" />
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页器 -->
        <div class="demo-pagination-block">
            <el-pagination background v-model:current-page="currentPage" v-model:page-size="pageSize"
                :page-sizes="[10, 20, 30, 40, 50]" :small="small" :disabled="disabled" pager-count="6"
                layout="total, prev, pager, next, sizes, jumper" prev-text="上一页" next-text="下一页"
                :total="FiltertableData?.length" @size-change="handleSizeChange" @current-change="handleCurrentChange" />

            <!-- 确定按钮 -->
            <!-- <el-button type="primary" @click="onGoto">确定</el-button> -->
        </div>
    </div>
</template>
  
<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import { ElTable } from 'element-plus'
import { Edit, Delete } from '@element-plus/icons-vue'
import { getadminList } from "../../../api/admin"
import { useRouter } from 'vue-router'
import * as dayjs from 'dayjs'

const tableData = ref(null)
const FiltertableData = ref(null)
const currentPage = ref(1)
const pageSize = ref(10)
const small = ref(false)
const disabled = ref(false)
const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const multipleSelection = ref([])
const router = useRouter()

const formInline = reactive({
    keys: ''
})


const handleSizeChange = (val: number) => {
    console.log(`${val} items per page`)
}

const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`)
}

const handleSelectionChange = (val: []) => {
    multipleSelection.value = val

}

const handleEdit = (index: number, row: any) => {
    console.log(index, row)
}

const handleDelete = (index: number, row: any) => {
    console.log(index, row)
    FiltertableData.value = FiltertableData.value.filter((item: any) => item != row)
}

const onSubmit = () => {
    if (!formInline.keys) {
        FiltertableData.value = tableData.value
        return
    }

    // 过滤
    FiltertableData.value = tableData.value.filter((item: any) => item.number.includes(formInline.keys))
}

// 全选删除数据按钮
const onDelsItem = () => {
    FiltertableData.value = FiltertableData.value.filter((item: any) => !multipleSelection.value.includes(item))
}

const onAdd = () => {
    router.push("/adminis/adminis_trator/adminis_trator_add")
}

// 点击了表格的开关，val当前这一行的最新数据
const onswitch = (val: any) => {
    // 修改本地数据的状态
    FiltertableData.value.forEach((item: any) => {
        if (item.name == val.name) {
            item['enable'] = val.enable
        }
    })
    // 修改远程地址状态
    // todo
}

const fetchdata = async () => {
    tableData.value = (await getadminList()).data
    // 深拷贝数据,后续均基于此数据做处理
    FiltertableData.value = JSON.parse(JSON.stringify(tableData.value))
}

onMounted(() => {
    fetchdata()
})

</script>

<style>
.header {
    background-color: white;
    padding: 20px 10px;
    border-radius: 10px;
    box-sizing: border-box;
}

.cell {
    text-align: center !important;
}

.demo-form-inline {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.demo-pagination-block {
    display: flex;
    justify-content: end;
    margin-top: 25px;
}

.el-pagination__sizes {
    margin: 0;
    margin-left: 15px;
}
</style>